<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>爱家-我的订单</title>
    <link href="/static/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/css/reset.css" rel="stylesheet">
    <link href="/static/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <link href="/static/css/ihome/main.css" rel="stylesheet">
    <link href="/static/css/ihome/orders.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="top-bar">
            <div class="nav-bar">
                <h3 class="page-title">我的订单</h3>
                <a class="nav-btn fl" href="{% url 'user:my' %}"><span><i class="fa fa-angle-left fa-2x"></i></span></a>
            </div>
        </div>
        {% if not orders %}
            <div style="text-align: center; font-size: 20px; margin-top: 80px" >您还没有任何订单</div>
        {% endif %}
    {% for order in orders %}
        <div {% if forloop.counter > 1 %} style="margin-top: 0px" {% endif %} class="orders-con">
            <ul class="orders-list">
                <li order-id={{ order.id }}>
                    <div class="order-title">
                        <h3>订单编号：{{ order.id }}</h3>
                        {% if order.status == "WAIT_COMMENT" %}
                        <div class="fr order-operate">
                            <button type="button" class="btn btn-success order-comment"
                                    data-toggle="modal" data-target="#comment-modal">发表评价</button>
                        </div>
                        {% endif %}
                    </div>
                    <div class="order-content">
                        <img src="/media/{{ order.house_order.index_image_url }}">
                        <div class="order-text">
                            <h3>{{ order.house_order.title}}</h3>
                            <ul>
                                <li>创建时间：{{ order.create_time | date }}</li>
                                <li>入住日期：{{ order.begin_date | date }}</li>
                                <li>离开日期：{{ order.end_date | date }}</li>
                                <li>合计金额：{{ order.amount }}元(共{{ order.days }}晚)</li>
                                <!--TODO:支付功能-->
                                <li>订单状态：
                                    <span style="font-weight: bold;">{{ order.get_status_display }}</span>
                                </li>
                                {% if order.status == "REJECTED" %}
                                    <li>拒单原因：{{ order.reject_reason }}</li>
                                {% endif %}
                                {% if order.status == "COMPLETE" %}
                                    <li>我的评价：{{ order.comment }}</li>
                                {% endif %}
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
            <form action="" method="post">
                <div class="modal fade" id="comment-modal" tabindex="-1" role="dialog" aria-labelledby="comment-label">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title">发表评价</h4>
                            </div>
                            <div class="modal-body">
                                <input type="hidden" name="order_id" id="order_id" >
                                <textarea class="form-control" name="comment" rows="3" id="comment" placeholder="请在此处填写评价"></textarea>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                <button type="submit" class="btn btn-primary modal-comment">确定</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    {% endfor %}
        <div class="footer">
            <p><span><i class="fa fa-copyright"></i></span>爱家租房&nbsp;&nbsp;享受家的温馨</p>
        </div> 
    </div>
    
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="/static/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <script src="/static/js/template.js"></script>
    <script src="/static/js/ihome/orders.js"></script>
</body>
</html>